<template>
    <div class="app-container margin-right12">
      <div class="main-page">
         <div class="left-part">
          
         </div>

        <div class="right-part">
         
            <div class="flex-wrap">
                <div class="user-wrap" v-for="(item,index) in doctorIn" :key="index">
                    <div class="label">{{ item.label }}：</div>
                    <div class="content">
                        <el-select @clear="clearWorker(item)" @change="saveWorker" clearable v-model="item.userId"  :placeholder="item.label" style="width: 100%">
                            <el-option
                                v-for="item in userList"
                                :key="item.userId"
                                :label="item.userName"
                                :value="item.userId"
                            />
                        </el-select>
                    </div>
                </div>
            </div>

            <div class="flex-wrap">
                <div class="user-wrap" v-for="(item,index) in doctorOut" :key="index">
                    <div v-if="item.label" class="label">{{ item.label }}：</div>
                    <div v-if="item.label" class="content">
                        <el-input @blur="saveWorker"  style="width:100%" v-model="item.userName" :placeholder="item.label"></el-input>
                    </div>
                </div>

                <div class="user-wrap" v-for="(item,index) in (4-doctorOut.length)" :key="index+'empty'">
                    <div class="label"></div>
                    <div class="content">
                     
                    </div>
                </div>
               
            </div>


            <div class="flex-wrap" style="align-items: start;">
                <div class="user-wrap" v-for="(item,index) in xishouNurs" :key="index">
                      <el-card style="width:100%" shadow="hover">
                        <template #header>
                          <div class="card-header">
                            <span>巡回值班 {{ item.startTime }}至{{ item.endTime }}</span>
                            <div>
                              <el-button v-if="item.active" style="padding:0" @click="clickNursSchedul(xishouNurs)" size="small" type="primary" text>新增交班</el-button>
                              <el-popover trigger="click" :visible="item.visible" placement="top">
                                <div>确定删除？</div>
                                <div style="text-align: right; margin: 0">
                                  <el-button size="small" text @click="item.visible = false">取消</el-button>
                                  <el-button size="small" type="primary" @click="delNurs(item,index)">
                                    确定
                                  </el-button>
                                </div>
                                <template #reference>
                                  <el-button v-if="item.active&&xishouNurs.length!=1"  style="padding:0" @click="item.visible = true" size="small" type="danger" text>删除交班</el-button>
                                </template>
                              </el-popover>
                              
                            </div>
                          </div>
                        </template>
                         <el-table
                          :data="item.workChangeList"
                          :show-header="false"
                          size="small"
                          style="width: 100%"
                          @selection-change="handleSelectionChange"
                        >
                          <el-table-column v-if="item.active" type="selection" :selectable="selectable" width="55" />
                          <el-table-column  property="name" label="Name">
                            <template #default="scope">
                              
                              <el-select :disabled="!(item.active&&xishouNurs.length==1)"  @change="saveNur(xishouNurs)" clearable v-model="scope.row.userId"  :placeholder="item.label" style="width: 100%">
                                  <el-option
                                      v-for="user in userList"
                                      :key="user.userId"
                                      :label="user.userName"
                                      :value="user.userId"
                                  />
                              </el-select>
                            </template>
                          </el-table-column>
                        </el-table>
                         <el-button v-if="xishouNurs.length==1" size="small" @click="addXishouUser(item)" type="primary" style="width: 100%">
                          新增人员
                        </el-button>
                        <template #footer>
                            <el-input
                              v-model="item.remark"
                              :disabled="!item.active||index!=0"
                              style="width: 100%"
                              :rows="2"
                              type="textarea"
                              placeholder="备注"
                            />
                        </template>
                      </el-card>
                </div>

                <div class="user-wrap" v-for="(item,index) in (4-xishouNurs.length)" :key="index+'empty'">
                    <div class="label"></div>
                    <div class="content">
                     
                    </div>
                </div>
            </div>


              <div class="flex-wrap" style="align-items: start;">
                <div class="user-wrap" v-for="(item,index) in xunhuiNurs" :key="index">
                      <el-card style="width:100%" shadow="hover">
                        <template #header>
                          <div class="card-header">
                            <span>洗手值班 {{ item.startTime }}至{{ item.endTime }}</span>
                            <div>
                              <el-button v-if="item.active" style="padding:0" @click="clickNursSchedul(xunhuiNurs)" size="small" type="primary" text>新增交班</el-button>
                              <el-popover trigger="click" :visible="item.visible" placement="top">
                                <div>确定删除？</div>
                                <div style="text-align: right; margin: 0">
                                  <el-button size="small" text @click="item.visible = false">取消</el-button>
                                  <el-button size="small" type="primary" @click="delNurs(item,index)">
                                    确定
                                  </el-button>
                                </div>
                                <template #reference>
                                  <el-button v-if="item.active&&xunhuiNurs.length!=1"  style="padding:0" @click="item.visible = true" size="small" type="danger" text>删除交班</el-button>
                                </template>
                              </el-popover>
                              
                            </div>
                          </div>
                        </template>
                         <el-table
                          :data="item.workChangeList"
                          :show-header="false"
                          size="small"
                          style="width: 100%"
                          @selection-change="handleSelectionChange"
                        >
                          <el-table-column v-if="item.active" type="selection" :selectable="selectable" width="55" />
                          <el-table-column  property="name" label="Name">
                            <template #default="scope">
                              
                              <el-select :disabled="!(item.active&&xunhuiNurs.length==1)"  @change="saveNur(xunhuiNurs)" clearable v-model="scope.row.userId"  :placeholder="item.label" style="width: 100%">
                                  <el-option
                                      v-for="user in userList"
                                      :key="user.userId"
                                      :label="user.userName"
                                      :value="user.userId"
                                  />
                              </el-select>
                            </template>
                          </el-table-column>
                        </el-table>
                         <el-button v-if="xunhuiNurs.length==1" size="small" @click="addXishouUser(item)" type="primary" style="width: 100%">
                          新增人员
                        </el-button>
                        <template #footer>
                            <el-input
                              v-model="item.remark"
                              :disabled="!item.active||index!=0"
                              style="width: 100%"
                              :rows="2"
                              type="textarea"
                              placeholder="备注"
                            />
                        </template>
                      </el-card>
                </div>

                <div class="user-wrap" v-for="(item,index) in (4-xunhuiNurs.length)" :key="index+'empty'">
                    <div class="label"></div>
                    <div class="content">
                     
                    </div>
                </div>
            </div>
          
          
        
          
        </div>

      </div>

     
       


      <el-dialog
        v-model="addSchedulLog"
        title="值班信息"
        align-center
        top="30vh"
        width="600"
      >
          <div class="common-flex">
            <div class="left-label">交班时间</div>
            <div class="right-vontent">
              <el-date-picker
                v-model="newSchelInfo.startTime"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="交班时间"
              />
            </div>
          </div>
          <div class="common-flex">
            <div class="left-label">备注</div>
            <div class="right-content">
              <el-input style="width:100%" placeholder="交班信息" v-model="newSchelInfo.remark" type="textarea" />
            </div>
          </div>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-divider content-position="left">交班护士</el-divider>
            <el-table
                :data="changeNurs"
                :show-header="false"
                border
                size="small"
                style="width: 100%"
              >
                <el-table-column  property="userName">
                 
                </el-table-column>
                <el-table-column>
                  <template #default="scope">
                    <el-input size="small" v-model="scope.row.password" placeholder="密码"></el-input>
                  </template>
                </el-table-column>
              </el-table>
          </el-col>
          <el-col :span="12">
            <el-divider content-position="left">接班护士<el-button @click="addChangeNurs" size="small" type="primary" text>新增人员</el-button></el-divider>
            <el-table
                :data="changeNursNew"
                :show-header="false"
                size="small"
                border
                style="width: 100%"
              >
               
                <el-table-column>
                  <template #default="scope">
                    <el-select clearable size="small" placeholder="选择值班人" v-model="scope.row.userId"  style="width: 100%">
                        <el-option
                            v-for="user in userList"
                            :key="user.userId"
                            :label="user.userName"
                            :value="user.userId"
                        />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column property="address" label="Address">
                  <template #default="scope">
                    <el-input size="small" v-model="scope.row.password" placeholder="密码"></el-input>
                  </template>
                </el-table-column>
              </el-table>
              
          </el-col>
        </el-row>
        

       
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="addSchedulLog = false">取消</el-button>
            <el-button type="primary" @click="submitNurse">
              保存交班
            </el-button>
          </div>
        </template>
      </el-dialog>
       
    </div>
  </template>
  
  <script setup>
  import dayjs from "dayjs";
  import useSurgeryingStore from '@/store/modules/surgerying'
  import { listUser } from "@/api/system/user";
  import { listNursschedul,addNursschedul,delNursschedul } from "@/api/manage/nursschedul";
  import { listSurgeryworker,addSurgeryworker } from "@/api/manage/surgeryworker";
  const { proxy } = getCurrentInstance();
  const { surgery_worker_user_type } = proxy.useDict('surgery_worker_user_type');
  let surgeryWorker=ref([])
  let doctorIn=ref([]);
  let addSchedulLog=ref(false);
  let xishouhushiInitData={};
  let doctorOut=ref([]);
  let xunhuihushiInitData={};
  const loading = ref(true);
  let userList=ref([]);
  let changeNursNew=ref([]);
  let changeNurs=ref([]);
  let newSchelInfo=reactive({userType:'',startTime:'',remark:'',surgeryId:useSurgeryingStore().surgerying.surgeryId})
  let xunhuiNurs=ref([]);
  let xishouNurs=ref([])

/** 查询用户信息列表 */
function getUserList() {
  loading.value = true;
  listUser({
    pageNum:1,
    pageSize:1000
  }).then(response => {
    userList.value = response.rows;
    getSurgeryWorker();
    getSurgeryNurs();
  });
}

function getSurgeryNurs(){
  listNursschedul({
    pageNum:1,
    pageSize:100,
    surgeryId:useSurgeryingStore().surgerying.surgeryId
  }).then(res=>{
    xishouhushiInitData=surgery_worker_user_type.value.filter(item=>{
        item.workerType=0;
        return item.value>19&&item.value<29;
    })[0]
    let len=0;
    xunhuihushiInitData=surgery_worker_user_type.value.filter(item=>{
      item.workerType=0
      return item.value>29&&item.value<39;
    })[0]

    let xishouData=res.rows.filter(item=>{
      return item.userType>19&&item.userType<29
    })
    let xunhuiData=res.rows.filter(item=>{
      return item.userType>29&&item.userType<39
    })
    if(xishouData){
      len=xishouData.length;
      xishouData[len-1].active=true;
      xishouNurs.value=xishouData
    }else{
      xishouNurs.value=[{
        surgeryId:useSurgeryingStore().surgerying.surgeryId,
        remark:'',
        userType:xishouhushiInitData.value,
        workChangeList:[{}]
      }]
    }


    if(xunhuiData){
      len=xunhuiData.length;
      xunhuiData[len-1].active=true;
      xunhuiNurs.value=xunhuiData
    }else{
      xunhuiNurs.value=[{
        surgeryId:useSurgeryingStore().surgerying.surgeryId,
        remark:'',
        userType:xunhuihushiInitData.value,
        workChangeList:[{}]
      }]
    }



    
  })
}

/***修改护士排班****/
function saveNur(data){

  for(let i=0;i<data.length;i++){
    for(let j=0;j<data[i].workChangeList.length;j++){
      data[i].workChangeList[j].nursSchedulId=data[i].nursSchedulId
    }
  }
  addNursschedul(data).then(res=>{
    getSurgeryNurs();
    proxy.$modal.msgSuccess("操作成功");
  })

}
/***交接班***/

function handleSelectionChange(user){
  changeNurs.value=user;
}
/***新增交班护士***/
function addChangeNurs(){
  changeNursNew.value.push({
    userId:''
  })
}

/***新增洗手排班***/

function clickNursSchedul(data){
  newSchelInfo.userType=data[0].userType;
  newSchelInfo.remark='';
  newSchelInfo.startTime=dayjs().format("YYYY-MM-DD HH:mm:ss");
  changeNursNew.value=[];
  addSchedulLog.value=true;
  for(let i=0;i<changeNurs.value.length;i++){
    changeNursNew.value.push({
      userId:''
    })
  }

  if(changeNurs.value.length==0){
    changeNursNew.value=[{userId:''}];
  }
 
  // xishouNurs.value.push({
  //   workChangeList:[xishouhushiInitData]
  // })
}
/**删除洗手护士交班**/
function delNurs(data,index){

  delNursschedul([data.nursSchedulId]).then(res=>{
    proxy.$modal.msgSuccess("删除成功");
    // xishouNurs.value.splice(index,1);
    getSurgeryNurs();
  })
}
/***新增洗手排班人员****/

function addXishouUser(data){
  data.workChangeList.push(JSON.parse(JSON.stringify(xishouhushiInitData)))
}

function submitNurse(){
  let transchangeNursNew=changeNursNew.value.filter(item=>{
    return item.userId
  })
  if(transchangeNursNew.length==0){
    proxy.$modal.msgWarning("未选择接班人员");
    return
  }
  let transData=[];
  
  let len=xishouNurs.value.length;
  let endData=xishouNurs.value[len-1];

  if(newSchelInfo.userType>29){
    len=xunhuiNurs.value.length;
    endData=xunhuiNurs.value[len-1];
  }
  let continueNur=[];
  for(let i=0;i<endData.workChangeList.length;i++){
    let data=null;
    for(let j=0;j<changeNurs.value.length;j++){
      if(endData.workChangeList[i].userId==changeNurs.value[j].userId){
        data=endData.workChangeList[i]
      }
    }
    if(data===null){
      continueNur.push({userId:endData.workChangeList[i].userId})
    }
  }

  endData.endTime=newSchelInfo.startTime;

  transData.push(endData);
  
  transData.push({
    ...newSchelInfo,
    workChangeList:[...continueNur,...transchangeNursNew]
  })


  addNursschedul(transData).then(res=>{
    addSchedulLog.value=false;
    getSurgeryNurs();
    proxy.$modal.msgSuccess("新增成功");
  })
}

/**保存手术参与人员**/
function saveWorker(){
  let transData=[]
  for(let i=0;i<doctorIn.value.length;i++){
    doctorIn.value[i].surgeryId=useSurgeryingStore().surgerying.surgeryId;
    if(doctorIn.value[i].surgeryWorkerId&&!doctorIn.value[i].userName){
      doctorIn.value[i].delFlag=1
    }
    if(doctorIn.value[i].userId||doctorIn.value[i].surgeryWorkerId){
      let userName=userList.value.filter(item=>{
        return item.userId==doctorIn.value[i].userId
      })[0]
      doctorIn.value[i].userName=userName?userName.userName:''
      transData.push(doctorIn.value[i])
    }

  }
  for(let i=0;i<doctorOut.value.length;i++){
    doctorOut.value[i].surgeryId=useSurgeryingStore().surgerying.surgeryId;
    if(doctorOut.value[i].surgeryWorkerId&&!doctorOut.value[i].userName){
      doctorOut.value[i].delFlag=1
    }
    if(doctorOut.value[i].userName||doctorOut.value[i].surgeryWorkerId){
      transData.push(doctorOut.value[i])
    }
  }

  transData=transData.map(item=>{
    item.userType=item.value
    return item
  })
  addSurgeryworker(transData).then(response => {
    
  });

}

/***删除手术参与人员****/
function clearWorker(worker){
  console.log(worker)
}

/* 获取手术参与人员**/

function getSurgeryWorker(){
  listSurgeryworker({
    pageNum:1,
    pageSize:1000
  }).then(response => {
      doctorOut.value=surgery_worker_user_type.value.filter(item=>{
        item.workerType=0;
        return item.value>9&&item.value<19;
      })
    
      doctorIn.value=surgery_worker_user_type.value.filter(item=>{
        item.workerType=0;
        return item.value<9;
      })
    
      

      for(let i=0;i<response.rows.length;i++){
        for(let j=0;j<doctorIn.value.length;j++){
          if(response.rows[i].userType==doctorIn.value[j].value){
            doctorIn.value[j].surgeryWorkerId=response.rows[i].surgeryWorkerId
            doctorIn.value[j].userId=response.rows[i].userId
          }
        }
        
      }

      for(let i=0;i<response.rows.length;i++){
        for(let j=0;j<doctorOut.value.length;j++){
          if(response.rows[i].userType==doctorOut.value[j].value){
            doctorOut.value[j].userName=response.rows[i].userName
            doctorOut.value[j].surgeryWorkerId=response.rows[i].surgeryWorkerId
          }
        }
        
      }
   
  });
}



  
  setTimeout(function(){
    getUserList();
  },1000)
  </script>

  <style lang="scss">
    .margin-right12{
      .el-form--inline .el-form-item{
        margin-right:12px!important;
      }
    }
  </style>

  <style lang="scss" scoped>
     
    .flex-wrap{
      display:flex;
      align-items: center;
      margin-bottom:14px;
      .card-header{
        display:flex;
        align-items: center;
        justify-content: space-between;
      }
      .user-wrap{
        width:25%;
        display:flex;
        align-items: center;
        margin-right:8px;
      }
      .label{
        text-align: right;
        width:105px;
      }
      .content{
        width:70%;
      }
    }
    .app-container{
      height:100%;
    }
    .main-page{
      height:100%;
      display:flex;
      .left-part{
        box-sizing: border-box;
        padding-top:10px;
        height:100%;
        overflow: auto;
        margin-right:18px;
      }
      .right-part{
        flex:1;
        height:100%;
        overflow: auto;
      }
    }

    .common-flex{
      display:flex;
      margin-top:12px;
      align-items: center;
      .left-label{
        text-align: right;
        padding-right:5px;
        width:61px;
      }
      .right-content{
        flex:1;
      }
    }
    
  </style>


  